<template>
    <div class="app-container">
      <!-- 测试 el-input-number 组件的 precision 属性-->
      <!--<el-input-number  v-model="value" controls-position="right"-->
                        <!--:precision="1"-->
                        <!--:step="2"-->
                        <!--:min="0"-->
                        <!--:max="10"></el-input-number>-->
      <!-- com.syl.test.controller.CrudController  RequestMapping -->
      <base-table :controller="''" :request-prefix="'static/testTableData.json'"
       @addSaveAfter="addSaveAfterHandler"  @editSaveAfter="editSaveAfterHandler"
      >
        <!-- 该写法也可以 但是注意要设置 columns.scene = custom -->
        <div>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            sortable="custom"
            prop="age"
            label="年龄"
            width="80">
          </el-table-column>
          <el-table-column
            sortable="custom"
            prop="sex"
            label="性别"
            width="80">
          </el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="120">
          </el-table-column>
          <el-table-column
            prop="city"
            label="市区"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="邮编"
            width="120">
          </el-table-column>
          <el-table-column
            prop="tag"
            column-key="tag"
            label="标签"
            width="100"
            :filters="[{ text: '家', value: 'home'}, { text: '公司', value: 'company'}]"
            filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.tag === '家' ? 'primary' : 'success'"
                disable-transitions>{{scope.row.tag}}</el-tag>
            </template>
          </el-table-column>
        </div>
      </base-table>

    </div>
</template>

<script>
  import baseTable from '@/components/common/BaseTable.vue'
  // import layer from 'layer'

  export default {
    name: 'UnitIndex',
    components: {
      baseTable
    },
    data() {
      return {
        value: 2,
        urlPrefix: ''
      }
    },
    methods: {
      open() {
      },
      addSaveAfterHandler(inputs) {
        console.log('addSaveAfterHandler')
      },
      editSaveAfterHandler(inputs) {
        console.log('addEditAfterHandler')
      }
    },
    created() {
    }
  }
</script>

<style scoped>
</style>
